<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <!-- 1、导入mapbox依赖 -->

      <script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script>
      <link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' />
      <style>
            *{margin:0;padding:0}
            #map{
                  width:100vw;
                  height: 100vh;
            }
      </style>
</head>

<body>
      <div id="map">

      </div>
      <script>
            /* 初始地图 */
            mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
            const map = new mapboxgl.Map({
                  container: 'map', // container ID
                  style: 'mapbox://styles/mapbox/streets-v12', // style URL
                  center: [114.30,30.50], 
                  zoom:12,
                  projection:'equalEarth'
            });
      </script>
</body>

</html>